<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('项目关联事项详情')" />
    <th:block th:include="include :: jquery-smartwizard-css" />
    <th:block th:include="includeProject :: project-css" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12">
                    <th:block th:include="includeProject :: projectInfo" />
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox-title">
                        <h5 style="font: bold">关联事项</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="tabs-container">
                                    <ul class="nav nav-tabs">
                                        <li th:class="${labelStat.first}?'active':''" th:each="label,labelStat:${@dict.getType('eb_project_stage')}">
                                            <a th:if="${project.approveType} > 1 or ${label.dictValue} > 10" data-toggle="tab" th:href="'#tab-' + ${label.dictValue}" aria-expanded="${labelStat.first}?'true':'false'" th:text="${label.dictLabel}"> </a>
                                        </li>
                                    </ul>
                                    <form class="form">
                                        <input type="hidden" id="projectId" name="projectId" th:value="${project.projectId}">
                                    <div class="tab-content">
                                        <div th:if="${project.approveType} > 1 or ${label.dictValue} > 10" th:id="'tab-' + ${label.dictValue}" th:class="${labelStat.first}?'tab-pane active':'tab-pane'" th:each="label,labelStat:${@dict.getType('eb_project_stage')}">
                                            <div class="col-sm-12">
                                                <table class="table table-hover margin bottom">
                                                    <thead>
                                                    <tr>
                                                        <th class="bs-checkbox " style="width: 36px; " data-field="0">
                                                            <input name="btSelectAll" type="checkbox" id="btSelectAll"/>
                                                        </th>
                                                        <th>事项名称</th>
                                                        <th>事项阶段</th>
                                                        <th>承诺时限</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr th:if="${stageItem.stageId} == ${label.dictValue}" th:each="stageItem : ${stageItems}" class="check">
                                                        <td class="bs-checkbox " style="width: 36px; ">
                                                            <input data-index="0" name="itemIds" type="checkbox" th:value="${stageItem.stageItemId}"/>
                                                        </td>
                                                        <td th:text="${stageItem.itemName}">-</td>
                                                        <td th:text="${label.dictLabel}">-</td>
                                                        <td th:text="${stageItem.itemDays}">-</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm" onclick="closeItem()"><i class="fa fa-reply-all"></i>返 回</button>
            <button type="button" class="btn btn-sm btn-info" onclick="submitProjectItem()"><i class="fa fa-plus"></i>提 交</button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="includeProject :: project-js" />
    <script th:inline="javascript">
        // 合起项目基础信息
        $('#_projectInfo_link').trigger('click');

        $(".tab-content div:first").addClass("active");

        // checkbox增加事件
        $(":input[name='btSelectAll']").click(function () {
            if (this.checked) {
                var table = $(this).closest("table");
                table.find('input').each(function () {
                    $(this).prop("checked", true);
                });
            } else {
                var table = $(this).closest("table");
                table.find('input').each(function () {
                    $(this).prop("checked", false);
                });
            }
        });

        var projectItemData = [[${projectItems}]];
        $(":input[name='itemIds']").each(function () {
            if (projectItemData.indexOf(','+$(this).attr('value')+',') >= 0) {
                $(this).prop("checked", true);
            }
        });

        function submitProjectItem() {
            $.modal.confirm("确定修改该项目关联的事项吗？", function() {
                var data = {};
                $('.form').each(function (index, form){
                    // 这里可以使用$.common.formToJSON(formId);  需要在form上加id
                    $.each($(form).serializeArray(), function(i, field) {
                        if(data[field.name]) {
                            data[field.name] += ("," + field.value);
                        } else {
                            data[field.name] = field.value;
                        }
                    });
                });

                $.operate.saveTab(ctx + "manage/items/edit", data);
            });
        }
    </script>
</body>
</html>